<html>
  <head>
     <title>28msec, Inc - guestbook</title>
     <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
     <style type="text/css">
        <!--
       .entry{
            background-color: #dddddd;
            margin-top: 2px;
            margin-left: auto;
            margin-right: auto;
            padding: 7px;
            width: 400px;
        }
        -->
     </style>
     <script type="text/javascript">
     //<![CDATA[
        function replaceEntries(data){
        	var entries=$("#entries");
            entries.fadeOut("slow",function(){
                $("#wait").remove();
                entries.empty();
                entries.append(data);
                entries.slideDown("slow");
            });
        }
	
        // function to refresh entries
        function reload(){
            $.ajax({
                type: "GET",
                url: "guestbook/list",
                success: function(data, textStatus){
                             replaceEntries(data);			
                         },
                error: function(request){
                        	    var wait=$("#wait");
                        	    var status=request.status;
                        	    wait.fadeOut("slow",function(){
                        	        $("#entries").append("<div style=\"color:red;\">An Error happened: ["+request.status+"] "+request.statusText+"</div>");
                        	    });
                        }
            });
        }
        
        $(document).ready(
        	    function(){
        	        //register submit wrapper for the add-form
                    $("#add-form").submit(function(){
                            var form=$("#add-form");
                            var action=form.attr("action");
                            var data=form.serialize();
                            $("#entries").append("<div id=\"wait\" class=\"entry\"><img src=\"images/loader.gif\" alt=\"loading...\" /></div>");
                            $.post(action,data,function(data, textStatus){
                                                if(textStatus=="success"){
                                                    replaceEntries(data);
                                                }else{
                                                    // refresh entries if an error occurred
                                                    reload();
                                                }
                                            }
                            );
                            return false;
	      			    }
                    );

                    // init: show loading 
                    $("#entries").append("<div id=\"wait\" class=\"entry\"><img src=\"images/loader.gif\" alt=\"loading...\" /></div>");
	      					
                    // init: load entries
                    reload();
	    });
     //]]>
     </script>
  </head>
  <body bgcolor="#2ea20d">
  	<div style="text-align:center;"><h1 style="color: #F29400">Guestbook (Powered by Sausalito)</h1></div>
    <div style="text-align:center;">
    	<h2>Entries (last 5 only):</h2>
    	<div id="entries" style="text-align:center;"></div>
    </div>
    <div style="text-align:center;">
        <h2>Add a new entry:</h2>
        <form id="add-form" action="guestbook/add" method="post">
            <p>Name:<br/><input name="author" type="text" size="30" maxlength="30"/></p>
            <p>Text:<br/><textarea name="text" cols="50" rows="3" onfocus="if(this.value=='Add your text here!'){this.value=''}">Add your text here!</textarea></p>
            <input type="submit" value="Insert"/>
        </form>
    </div>
  </body>
</html>
